<template>
	<view class="content">
		<view class="container">
			<view class="item" @click="drawMoney">
				<view class="icon"><image src="@/static/images/mon_tx@3x.png" /></view>
				<view class="title">提现金额</view>
				<view class="note">￥{{balance}}</view>
				<view class="arrowright"><image class="vc-item-arrow" src="@/static/images/right.png"></image></view>
			</view>
			<view class="item" @click="drawMoneyList">
				<view class="icon"><image src="@/static/images/mon_jl@3x.png" /></view>
				<view class="title">提现记录</view>
				<view class="note"></view>
				<view class="arrowright"><image class="vc-item-arrow" src="@/static/images/right.png"></image></view>
			</view>
		</view>
		<sa-popup v-show="isShowEvalauteModal" title="提现" @cancelPopup="cancelPopup" @confirmPopup="submitdraw()">
			<view class="evaluate-order">
				<view class="remark-container">
					<input maxlength="100" v-model="txt_money"  type="digit" class="remark" />
				</view>
				<view class="stars">
					<text style="font-size: 28rpx;">注：平台已收取手续费</text>
				</view>
				<view class="stars">
					<text style="font-size: 28rpx;margin-left: 60rpx;">实际提现金额</text>
					<text style="font-size: 32rpx;color: #D05300;">￥{{txt_money | moneyFormat(2)}}</text>
				</view>
			</view>
		</sa-popup>
	</view>
</template>

<script>
	import { isLogin,toLogin } from '@/config/common.js'
	import {getPlayPoundage,servePlayerWithdraw} from '@/constant/schedule.js'
	import saPopup from '@/components/sa-popup.vue'
	export default {
		components:{
			saPopup
		},
		data() {
			return {
				isShowEvalauteModal:false,
				play_poundage:0.3,
				txt_money:0.00,
				actual_money:0.00,
				balance:0.00,
				servePlayerId: uni.getStorageSync('customerId')
			};
		},
		onLoad(option) {
			if(isLogin()){
				if(option.balance){
					this.balance = option.balance;
				}
				this.playPoundage();
			}else{
				toLogin();
			}
		},
		methods:{
			drawMoney:function(){
				this.isShowEvalauteModal = true;
			},
			cancelPopup:function(){
				this.isShowEvalauteModal = false;
			},
			drawMoneyList:function(){
				uni.navigateTo({
					url:'./draw-money-list/index'
				})
			},
			async playPoundage(){
				let result = await getPlayPoundage();
				if(result.Value){
					this.play_poundage = result.Value;
				}
			},
			async submitdraw(){
				if(this.txt_money < 1){
					uni.showToast({
						title: '提现金额必须大于1',
						icon: 'none',
					})
					return ;
				}
				if(Number(this.txt_money) > Number(this.balance)){
					uni.showToast({
						title: '提现金额不能大于余额',
						icon: 'none',
					})
					return ;
				}
				let result = await servePlayerWithdraw({ ServePlayerId: this.servePlayerId, WithdrawAmount: this.txt_money });
				uni.showToast({
					title: '提现成功',
					icon: 'none',
				})
				this.isShowEvalauteModal = false;
				
			}
		}
	}
</script>

<style lang="scss">
	.item:first-child{
		border-top:2rpx solid #e1e3e2;
	}
	.item{
		display: flex;
		height:120rpx;
		line-height: 120rpx;
		padding:0rpx 20rpx;
		border-bottom:2rpx solid #e1e3e2;
		>view{
			flex:1;
		}
		.icon{
			flex:0 0 110rpx;
			image{
				width:80rpx;
				height:80rpx;
				vertical-align: middle;
			}
		}
		.title{
			flex:0 0 150rpx;
			padding-left:30rpx;
		}
		.note{
			flex:0 0 315rpx;
			text-align: right;
			padding:0rpx 30rpx;
			color:#ca4e70;
		}
		.arrowright{
			flex:0 0 15rpx;
			image{
				width: 15rpx;
				height: 27rpx;
			}
		}
	}
	.stars {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.evaluate-order {
		padding: 20rpx;
	
		.remark-container {
			border: 2rpx solid #f5f6fd;
		}
	
		.remark {
			margin-left: 20rpx;
			height: 60rpx;
			width: 90%;
			font-size: 28rpx;
		}
	}
	.sa-popup-content {
		background-color: #fff;
		width: 500rpx;
		margin-top: 100rpx;
		border-radius: 8rpx;
		position: relative;
		overflow-y: auto;
	}
	    
</style>
